<style>

</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
            <Button class="float-r" size="large" icon="md-add" @click="addItem"   v-perms="'bss:config:save'">添加</Button>
            <Button type="primary"  size="large" icon="ios-search" @click="doSearchTableList" style="margin-right:10px;float:right;"  v-perms="'bss:config:list'">搜 索</Button>
        </Col>
      </Row>
    </div>
    <!--table-->
    <Row>
      <Table stripe size="small" :columns="tableColums" :data="tableData"></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :page-size="currentPageSize"
        :current="currentPage"
        @on-change="changeCurrentPage"
        @on-page-size-change="changePageSize"
        show-total
        show-sizer
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
     <!--新增编辑-->
    <pushForm
      :modalShow="formShow"
      :modalFormTitle="formTitle"
      :parentForm="parentForm"
      @listenModalForm="hideModel"
      @refreshTableList="getTableList"
    ></pushForm>
    <!--是否删除框-->
    <Modal v-model="delModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="btnLoading" @click="comfirmDel">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getConfigList,deleteConfig } from "@/api/system";
import pushForm from "./pushForm.vue";
import expandRow from "./table-expand.vue";
export default {
  name: "pushList",
  components: {
    pushForm,
    expandRow
  },
  data() {
    return {
      tableColums: [
         {
              type: 'expand',
              width: 50,
              render: (h, params) => {
                  return h(expandRow, {
                      props: {
                          row: params.row
                      }
                  })
              }
          },
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "配置名称",
          key: "configName"
        },
        {
          align: "center",
          title: "平台",
          key: "platform",
           render: (h, params) => {
            let platformTxt = params.row.platform==1?'腾讯云':'阿里云'
            
            return h(
              "span",
              {
                style: {
                  color: params.row.platform==1?'#FF6100':'#1e87ef'
                }
              },
              platformTxt
            );
          }
        },
                {
          align: "center",
          title: "语音通道",
          key: "voiceChannel",
           render: (h, params) => {
            let voiceTxt = params.row.voiceChannel==1?'AI智能语音':'腾讯云语音'
            
            return h(
              "span",
              {
                style: {
                  color: params.row.voiceChannel==1?'#FF6100':'#1e87ef'
                }
              },
              voiceTxt
            );
          }
        },
        {
          align: "center",
          title: "APPID",
          key: "appid",
        },
        {
          align: "center",
          title: "APPKEY",
          key: "appkey"
        },
        {
          align: "center",
          title: "备注",
          key: "remark"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let actions = [];

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "bss:config:update"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editItem(params.row);
                    }
                  }
                },
                "修改"
              )
            );

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "bss:config:delete"
                    }
                  ],
                  on: {
                    click: () => {
                      this.delItem(params.row.devId);
                    }
                  }
                },
                "删除"
              )
            );

            return h("div", actions);
          }
        }
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
      currentPageSize: 10,
       formShow: false,
      formTitle: "添加推送模板",
      parentForm: {
        configId: "",
          configName: "",
          platform: "",
          appid: "",
          appkey: "",
          tempsmsFire: "",
          tempsmsBreakdown: "",
          tempsmsOffline: "",
          tempsmsUnload:"",
          tempsmsClear:"",
          tempvoiceFire:"",
          tempvoiceBreakdown:"",
          tempvoiceOffline:"",
          tempvoiceUnload:"",
          tempvoiceClear:"",
          remark:"",
      },
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        size: 10,
        current: 1
      }
    };
  },
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.searchForm.current = this.currentPage;
      this.searchForm.size = this.currentPageSize;
      const params = this.searchForm;
      const result = await getConfigList(params);
      if (result.code == 0) {
        let res = result.data.records;
        this.total = result.data.total;
        this.tableData = res;
      }
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
     addItem() {
      Object.keys(this.parentForm).forEach(key => (this.parentForm[key] = ""));
      this.formTitle = "添加模板";
      this.formShow = true;
    },
    editItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row));
      this.formTitle = "修改模板";
      this.formShow = true;
    },
    delItem(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await deleteConfig(this.delId);
        if (res.code == 0) {
          this.getTableList();
          this.delModal = false;
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    },
  }
};
</script>
